/**
 * 感谢小伙伴对中犇框架的杰出贡献
 * 从中涌现出很多优秀的组件
 * 此次大融合便于后期拆分进行
 * 为了便于JS请求所有请求采用/admin.php开头
 * 语言包暂时移除，如需支持多语言 可使用i18n支持
 * @author 晓风[215628355@qq.com] 
 * 依赖table00.js
**/
//删除视频
function removeV(ele) {
    $('#file_list_video').html('')
    $('#videoVal').attr({ 'value': '' });
}
// 删除图片
function removePic(ele) {
    let tempId = ele.getAttribute("data-id");
    slideVal.replace(`${tempId},`,'')
    $('[name="thumb"]').attr({ 'value': slideVal });
}
// 商品列表图删除
function listRemovePic(ele) {
    let tempId = ele.getAttribute("data-id");
    listSlideVal.replace(`${tempId},`,'');
    $('[name="images"]').attr({ 'value': listSlideVal });
}

$(function () {				
			let cutPicWidth = 400; // 裁剪图片的宽度
			let cutPicHeight = 400; // 裁剪图片的高度

			let slideVal = ''; // 此属性是图片裁剪完之后给from表单的input的value赋值的,不可删除
			let picNum = 0; // 上传的图片数量
			let Html = []; // 空的模板字符串
			// 商品主图（需要在用到这个功能的页面添加一个layer弹窗）
		    $('#add_picker_thumb').on('click', () => {
                    // 在这里修改裁剪图片的大小
                    let data = {
                        picSize :{
                            "width": cutPicWidth,
                            "height": cutPicHeight
                        }
                    }
                    imageCov(data,function(res,picData){  
                 
                        picNum++;
                        slideVal = `${res.id}`;
                        
                        Html.length = 0;
                        Html.push(`<div id="WU_FILE_${picNum}" style="width:107px;" class="file-item js-gallery thumbnail">
                                    <a data-magnify="gallery" id="iview" href="${res.path}">
                                        <img src="${picData}" data-original="${res.path}"/>
                                    </a>
                                    <div class="info">xxxx</div>
                                    <i class="fa fa-times-circle remove-picture" onclick="removePic(this)" data-id="${res.id}"></i>
                                    <div class="file-state img-state">
                                        <div class="bg-success">上传成功</div>
                                    </div>
                                </div>`);
                        $('[name="thumb"]').attr({ 'value': slideVal });
                        $("#file_list_thumb").html(Html.join(''));
                 
                    })
            })
		
			// 商品展示列表图
			let listSlideVal = ''; // 此属性是图片裁剪完之后给from表单的input的value赋值的,不可删除
			let listPicNum = 0; // 上传的图片数量
			let listHtml = []; // 空的模板字符串
			$('#add_picker_images').on('click', () => {
				   let data = {
                        picSize :{
                            "width": cutPicWidth,
                            "height": cutPicHeight
                        }
                    }
                    imageCov(data,function(res,picData){                
                        listPicNum++;
                        listSlideVal = $('[name="images"]').attr('value');
                        if(listSlideVal == '') {
                            listSlideVal += `${res.id}`;
                        } else {
                            listSlideVal += `,${res.id}`;
                        }
                        let tempDOM = $(`<div id="WU_FILE_${listPicNum}" style="width:107px;" class="file-item js-gallery thumbnail">
                                    <a data-magnify="gallery" id="iview" href="${res.path}">
                                        <img src="${picData}" data-original="${res.path}"/>
                                    </a>
                                    <div class="info">xxxx</div>
                                    <i class="fa fa-times-circle remove-picture" onclick="listRemovePic(this)" data-id="${res.id}"></i>
                                    <i class="fa fa-fw fa-arrows move-picture"></i>
                                    <div class="file-state img-state">
                                        <div class="bg-success">上传成功</div>
                                    </div>
                                </div>`);
                        $('[name="images"]').attr({ 'value': listSlideVal });
                        $("#file_list_images").append(tempDOM);
                    
                    })
			})
		
			// 视频封面图

			let slideValVideoImg = ''; // 此属性是图片裁剪完之后给from表单的input的value赋值的,不可删除
			let picNumVideoImg = 0; // 上传的图片数量
			let HtmlVideoImg = []; // 空的模板字符串
			// 商品主图（需要在用到这个功能的页面添加一个layer弹窗）
			$('#add_picker_video_img').on('click', () => {
       
				 // 在这里修改裁剪图片的大小
                    let data = {
                        picSize :{
                            "width": cutPicWidth,
                            "height": cutPicHeight
                        }
                    }
                    imageCov(data,function(res,picData){                
                            picNumVideoImg++;
                            slideValVideoImg = `${res.id}`;
                            
                            HtmlVideoImg.length = 0;
                            HtmlVideoImg.push(`<div id="WU_FILE_${picNumVideoImg}" style="width:107px;" class="file-item js-gallery thumbnail">
                                        <a data-magnify="gallery" id="iview" href="${res.path}">
                                            <img src="${picData}" data-original="${res.path}"/>
                                        </a>
                                        <div class="info">xxxx</div>
                                        <i class="fa fa-times-circle remove-picture removePicVideoImg" data-id="${res.id}"></i>
                                        <div class="file-state img-state">
                                            <div class="bg-success">上传成功</div>
                                        </div>
                                    </div>`);
                            $('[name="video_img"]').attr({ 'value': slideValVideoImg });
                            $("#file_list_thumb_video_img").html(HtmlVideoImg.join(''));
                            $('.removePicVideoImg').click((e)=>{
                                let ele = e.currentTarget
                                let tempId = ele.getAttribute("data-id");
                                for (let i = 0; i < HtmlVideoImg.length; i++) {
                                    if (HtmlVideoImg[i].includes(`<i class="fa fa-times-circle remove-picture removePicVideoImg" data-id="${tempId}"></i>`)) {
                                        HtmlVideoImg.splice(i, 1);
                                        $("#file_list_thumb_video_img").html(HtmlVideoImg.join(''));
                                        return
                                    }
                                }
                                slideValVideoImg.replace(`${tempId},`,'');
                                $('[name="video_img"]').attr({ 'value': slideValVideoImg });

                        })
                    
                    })
			})

		$('.removePicVideoImg02').click((e)=>{
                $("#file_list_thumb_video_img").html('');
                $('[name="video_img"]').attr({ 'value': 0 });
        })
        // 删除视频
        // 上传视频
        
		layui.use('upload', function(){
                var $ = layui.jquery
                ,upload = layui.upload;
                upload.render({
                    elem: '#add_picker_video'
                    ,url: '/admin.php/admin/upload/save/dir/file/form/goods'
                    ,accept: 'video' //视频
                    , progress: function (n, elem) {
                        console.log(n)
                        var percent = n + '%' //获取进度百分比
                        // element.progress('demo', percent); //可配合 layui 进度条元素使用
                        $('.layui_progress_wrap').show()
                        $('.layui_progress').css('width',percent)
                        //以下系 layui 2.5.6 新增
                        // console.log(elem); //得到当前触发的元素 DOM 对象。可通过该元素定义的属性值匹配到对应的进度条。
                    }
                    ,done: function(res){
                        if(res.code != 1){
                           layer.msg(res.msg);
                           return false;
                        }
                        $('.layui_progress_wrap').hide()
                        layer.msg("上传成功");
                        console.log(res)
                        $('#videoVal').attr({ 'value':res.id });
                        var NewHtml =`
                        <div style=' position: relative;'>
                        <video src="${res.path}" width="221" height="121" controls="controls" id="video" >
                            </video>
                            <span  onclick="removeV(this)" style='position: absolute;top: 0;right: 0;margin-right: 1px;fonst-size:24px;border:1px solid #EC6767;border-radius: 50%;padding: 2px 5px;cursor: pointer; color: #fff;background: #EC6767;font-weight: bold;'>x</span>
                        </div>`
                        $('#file_list_video').html(NewHtml)

                    
                    }
                });
	})

})